<template>
  <div class="outer">
    <h4 class="form-name-text" style="text-align: center;font-size:20px" v-if="this.QID==-1">该问卷尚未创建</h4>
    <h4 class="form-name-text" style="text-align: center;font-size:20px" v-else> {{title[0]}}</h4>
    <div class="form-name-text" style="text-align: left;margin-bottom:20px;margin-top:20px">{{Qdescription}}</div>
    <StaticCard v-for="(post,index) in this.posts" v-bind:post="post" v-bind:key="index"></StaticCard>
  </div>
</template>
<script>
import MyChart from "../components/DataAnalysis/MyChart.vue";
import StaticCard from "../components/StaticCard.vue";
export default {
  data() {
    return {
      Qdescription: "这里是答卷回收统计",
      posts: [],
      title: [],
      qtitle: [],
      QID: -1,
      allanswers: []
    };
  },
  components: {
    StaticCard,
    MyChart
  },
  mounted() {
    this.QID = this.$route.params.QID;
    if (this.QID != -1) {
      this.$serve
        .getSurveyAndAnswer(this.QID)
        .then(res => {
          // res = {suvey,answers}
          this.title = this.getTitle(res.survey);
          this.qtitle = this.getQuestionTitle(res.survey);
          this.getAnswer(res.answers);
        })
        .catch(err => {
          this.$message.error("获取统计结果失败");
          console.log(err);
        });
      //   this.title = this.getTitle();
      //   this.qtitle = this.getQuestionTitle();
      //   this.$serve.statisticTest(this.QID).then(res => {
      //     // this.$serve.getQuestionSheet().then(res => {
      //     for (var j = 0; j < this.qtitle.length; j++) {
      //       var oo = [];
      //       for (let item of Object.keys(res.data.all_answers)) {
      //         var mm = res.data.all_answers[item];
      //         oo.push(mm.answers[j]);
      //       }
      //       this.allanswers.push(oo);
      //     }
      //     this.posts = this.$mTool.getStaticPosts(res);
      //     for (var i = 0; i < this.qtitle.length; i++) {
      //       this.posts[i].questiontitle = this.qtitle[i];
      //       this.posts[i].allanswers = this.allanswers[i];
      //     }
      //   });
    }
  },
  computed: {},
  methods: {
    getAnswer(res) {
      //直接放入ans/get的返回体
      for (var j = 0; j < this.qtitle.length; j++) {
        var oo = [];
        for (let item of Object.keys(res.data.all_answers)) {
          var mm = res.data.all_answers[item];
          oo.push(mm.answers[j]);
        }
        this.allanswers.push(oo);
      }
      this.posts = this.$mTool.getStaticPosts(res);
      for (var i = 0; i < this.qtitle.length; i++) {
        this.posts[i].questiontitle = this.qtitle[i];
        this.posts[i].allanswers = this.allanswers[i];
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    getQuestionTitle(res) {
      //放入ques/load的返回体
      var qt = [];
      for (var i = 0; i < res.data.Questions.length; i++) {
        var b = res.data.Questions[i].description;
        qt.push(b);
      }
      return qt;
    },
    getTitle(res) {
      var ttitle = [];
      ttitle.push(res.data.QName);
      this.Qdescription = res.data.Qdescription;
      return ttitle;
    }
  }
};
</script>

<style scoped>
.outer {
  width: 1000px;
  /* height: 586px; */
  padding: 15px;
  padding-bottom: 70px;
  margin: 15px auto;
  background-color: rgba(229, 239, 247, 0.87);
  position: relative;
}
.form-name-text {
  padding: 6px 10px;
  border: 1px dashed transparent;
  line-height: 30px;
  margin: 0;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
</style>